<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="layout :: htmlhead" th:with="title='favorites'">
<!--    <meta  charset="utf-8" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">-->
    <title>coolboy 管理</title>
    <meta name="renderer" content="webkit"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all"></link>
    <script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="root">
    <input type="hidden" id="payType" value="">
    <header class="site-header_ee0641">
        <div class="logo_ee0641">
            <div class="title_ee0641">
                匿名支付转账平台
            </div>
        </div>
        <div class="menu_ee0641">
            <div class="link_ee0641">
                <a aria-current="page" class="active_ee0641" href="/index2" style="color: #fff">首页</a>
            </div>
            <div class="link_ee0641">
                <img src="/images/logo.png" class="layui-nav-img"></img>
                <shiro:principal property="username"></shiro:principal>
            </div>
            <div class="link_ee0641 logout">
                <a href="/logout" style="color: #fff">退出</a>
            </div>
        </div>
    </header>
    <div>
        <img src="/media/1.jpg" style="width: 100%;height: 300px;">
<!--        <img src="/media/2.jpg">-->
    </div>
    <div class="payType">
        <div class="payChild" onclick="changeAliPay()">
            支付宝
        </div>
        <div class="payChild" onclick="changeInternational()">
            国际汇款
        </div>
        <div class="payChild" onclick="changeBank(2)">
            信用卡
        </div>
        <div class="payChild" onclick="changeBank(3)">
            银行转账
        </div>
    </div>

    <div id="aLiPayForm" class="fromClass" >
     <div class="row_1">
         <div class="select">
             <select class="boinType" id="boinType1" >
                 <option value="USDT">USDT</option>
                 <option value="ETH">ETH</option>
             </select>
         </div>
         <div class="alertMsg">可更改不同类型数字货币</div>
     </div>
        <div class="row_1">
            <div class="row_2_child">
                <input value="" id="bankNo1" name="bankNo1" placeholder="支付宝账号" type="text">
            </div>
            <div class="row_2_child">
                <input value="" id="payeer1" name="payeer1" placeholder="付款人姓名" type="text">
            </div>
            <div class="row_2_child">
                <input value="" id="amount1" name="amount1" placeholder="转账金额(元)    不小于100元" type="number">
            </div>
        </div>
        <div class="btn-class">
            <button type="button" onclick="createOrder1()">提交订单</button>
        </div>
    </div>
    <div id="internationalPayForm" class="fromClass" style="display: none">
        <div class="row_1">
            <div class="select">
                <select class="boinType" id="boinType2">
                    <option value="USDT">USDT</option>
                    <option value="ETH">ETH</option>
                </select>
            </div>
            <div class="alertMsg">可更改不同类型数字货币</div>
        </div>
        <div class="row_1">
            <div class="row_2_child">
                <input value="" id="bankNo2" name="bankNo2" placeholder="卡号" type="text">
            </div>
            <div class="row_2_child">
                <input value="" id="payeer2" name="payeer2" placeholder="收款人姓名" type="text">
            </div>
            <div class="row_2_child">
                <input value="" id="amount2" name="amount2" placeholder="转账金额(元)    不小于100元" type="number">
            </div>
        </div>
        <div class="row_1">
            <div class="row_2_child">
                <select id="county">
                    <option value="CHN">中国</option>
                    <option value="US">美国</option>
                    <option value="AUS">澳大利亚</option>
                    <option value="UK">英国</option>
                    <option value="MAS">马来西亚</option>
                    <option value="THA">泰国</option>
                    <option value="IDN">印度尼西亚</option>
                    <option value="HK">中国香港</option>
                </select>
            </div>
            <div class="row_2_child">
                <input value="" id="swiftCode2" name="swiftCode2" placeholder="Swift code" type="text">
            </div>
            <div class="row_2_child">
                <input value="" id="bankName2" name="bankName2" placeholder="银行名称" type="text">
            </div>
        </div>
        <div class="btn-class">
            <button type="button" onclick="createOrder2()">提交订单</button>
        </div>
    </div>
    <div id="BankCardPayForm" class="fromClass" style="display: none">
        <div class="row_1">
            <div class="select">
                <select class="boinType" id="boinType3">
                    <option value="USDT">USDT</option>
                    <option value="ETH">ETH</option>
                </select>
            </div>
            <div class="alertMsg">可更改不同类型数字货币</div>
        </div>
        <div class="row_1">
            <div class="row_2_child" style="width: 65%">
                <input value="" id="bankNo3" name="bankNo3" placeholder="账号" type="text">
            </div>
        </div>
        <div class="row_1">
            <div class="row_2_child">
                <input value="" id="bankName3" name="bankName3" placeholder="银行名称" type="text">
            </div>

            <div class="row_2_child">
                <input value="" id="payeer3" name="payeer3" placeholder="持卡人" type="text">
            </div>

            <div class="row_2_child">
                <input value="" id="amount3" name="amount3" placeholder="转账金额(元)    不小于100元" type="number">
            </div>
        </div>
        <div class="btn-class">
            <button type="button" onclick="createOrder3()">提交订单</button>
        </div>
    </div>

<div>
    <h1>实时数据</h1>
    <div>
       <table id="order_list">
           <thead>
           <th>时间</th>
           <th>账单类型</th>
           <th>支付货币</th>
           <th>金额</th>
           </thead>
           <tbody id="orderList">
           </tbody>
       </table>
        <span id="emptyOrderList">暂无数据</span>

    </div>
</div>
    <footer class="site-footer_53a4c1">
        <div class="blue-bar_53a4c1"></div>
        <div class="content_53a4c1"></div>
    </footer>
</div>
</body>
<style>
    @media screen and (min-width: 330px) {
        body{text-align:center}
        .payType{
            margin:5px auto;
            width:100%;
            height:60px
        }
        .payChild{
            margin: 0 auto;
            margin-left: 4%;
            border: 1px solid #00B83F;
            font-size:20px;
            color: #00F7DE;
            line-height: 3;
            width: 20%;
            height: 60px;
            float: left;
            border-radius:30px 30px 30px 30px;
        }
        .fromClass{
            margin: 30px auto;
            width: 90%;
            height: 250px;
            background: #66cc99;
            border-radius:5px 5px 5px 5px;
        }
        .boinType{
            margin-top: 13px;
            margin-left: 50px;
            width: 50%;
            float: left;
            height: 37px;
            background: #66cc99;
            border: 2px solid white;
            color:#fff;
        }
        .alertMsg{
            margin: 22px 0px auto;
            float: left;
            text-align: left;
            width: 30%;
            height: 37px;
            color: yellow;
        }

        .row_2_child{
            margin: 5px auto;
            width: 28%;
            margin-left: 4%;
            float: left;

        }
        input{
            width: 100%;
            height: 37px;
            background: #66cc99;
            border: 2px solid white;
            color:#fff;
        }
        .btn-class{
            margin: 10px 30px auto;
            float: left;
        }
        #county{
            margin: 0px 0px auto;
            width: 100%;
            float: left;
            height: 40px;
            background: #66cc99;
            border: 2px solid white;
            color:#fff;
        }
        button{
            width: 150px;
            height: 37px;
            background: yellow;
            border-radius:12px 12px 12px 12px;
        }
        input::-webkit-input-placeholder {
            color:#fff;
        }
        #order_list{
            margin: 30px auto;
            width: 90%;
            height: 100%;
        }
        th{
            font-size: 20px;
        }
        header.site-header_ee0641 {
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 0 10%;
            height: 72px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: rgba(0,0,0,.53);
            transition: .35s ease;
            transition-property: top;
            top: 0;
            left: 0;
        }
        * {
            box-sizing: border-box;
        }
        .logo_ee0641 {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .menu_ee0641 {
            display: flex;
            flex-direction: row;
            color: #fff;
            font-weight: 400;
            margin: 0 -15px;
        }
        .menu_ee0641 .link_ee0641 {
            margin: 0 15px;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
        }
        footer.site-footer_53a4c1 {
            position: relative;
            z-index: 99;
        }
        footer.site-footer_53a4c1 .blue-bar_53a4c1 {
            height: 15px;
            width: 100%;
            background-color: #0ed4a6;
        }
        footer.site-footer_53a4c1 .content_53a4c1 {
            background-color: #191919;
            color: #ababab;
            height: 170px;
            line-height: 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .forms_255a25 .forms-bg_255a25 .matrix-dots_255a25 {
            flex: 1;
            height: 244px;
            background-image: radial-gradient(#a6ffe8 7%,transparent 0);
            background-size: 34px 34px;
        }
        td{
            color:orangered;
        }

    }


</style>
<script type="text/javascript" >
    function changeBank(val){
        $("#payType").val(val);
        $("#aLiPayForm").attr("style","display:none;");
        $("#BankCardPayForm").attr("style","display:block;");
        $("#internationalPayForm").attr("style","display:none;");
    }
    function changeInternational(){
        $("#payType").val(1);
        $("#aLiPayForm").attr("style","display:none;");
        $("#BankCardPayForm").attr("style","display:none;");
        $("#internationalPayForm").attr("style","display:block;");
    }
    function changeAliPay(){
        $("#payType").val(0);
        $("#aLiPayForm").attr("style","display:block;");
        $("#BankCardPayForm").attr("style","display:none;");
        $("#internationalPayForm").attr("style","display:none;");
    }
    $(function(){
        $("#payType").val(0);
        getPayType();
        getList();
        if(window.screen.width<800){
            $(".boinType").css("marginLeft","18px")
        }


    })
    function createOrder1(){
        let params={};
        params.payType=$("#payType").val();
        params.rateType=$("#boinType1").val();
        params.bankNo=$("#bankNo1").val();
        params.payeer=$("#payeer1").val();
        params.amount=$("#amount1").val();
        submit(params);
    }
    function createOrder2(){
        let params={};
        params.payType=$("#payType").val();
        params.rateType=$("#boinType2").val();
        params.bankNo=$("#bankNo2").val();
        params.payeer=$("#payeer2").val();
        params.amount=$("#amount2").val();
        params.county=$("#county").val();
        params.swiftCode=$("#swiftCode2").val();
        params.bankName=$("#bankName2").val();
        submit(params);
    }
    function createOrder3(){
        let params={};
        params.payType=$("#payType").val();
        params.rateType=$("#boinType3").val();
        params.bankNo=$("#bankNo3").val();
        params.payeer=$("#payeer3").val();
        params.amount=$("#amount3").val();
        params.bankName=$("#bankName3").val();
        submit(params);
    }

    //测试参数
    function checkRegParams(param){
        let payType=param.payType;
        console.log(param.amount<100);
        if(!param.amount){
            layer.alert("转账金额必须大于100");
            return false;
        }
        if(param.amount<100){
            layer.alert("转账金额必须大于100");
            return false;
        }
        if(!param.bankNo){
            switch (payType){
                case 0:
                    layer.alert("支付宝账号未填");
                    break;
                case 1:
                    layer.alert("卡号未填");
                    break;
                case 2:
                    layer.alert("卡号未填");
                    break;
                case 3:
                    layer.alert("卡号未填");
                    break;
                default:
                    layer.alert("支付宝账号未填");
                    break;
            }
            return false;
        }
        if (!param.payeer){
            layer.alert("付款人未填");
            return false;
        }
        if(payType!=0){
            if (!param.bankName){
                layer.alert("银行名称未填");
                return false;
            }
        }
        if(payType==2){

            if (!param.county){
                layer.alert("转账地区");
                return false;
            }
            if (!param.swiftCode){
                layer.alert("swiftCode未填");
                return false;
            }
        }
        return true;
    }

    function submit(param){
        if(!checkRegParams(param)){
            return false;
        }
        $.ajax({
            type: "POST",
            dataType:'json',
            data:JSON.stringify(param),
            contentType: 'application/json; charset=UTF-8',
            url: "payOrder/create",
            success: function (data) {
                if (data.code == "1000") {
                    $("#name").val(null);
                    $("#rate").val(null);
                    layer.alert("操作成功",function(){
                        layer.closeAll();
                        //加载页面
                        load(obj);
                    });
                } else {
                    layer.alert(data);
                }
            },
            error: function () {
                layer.alert("创建订单异常",function(){
                    layer.closeAll();
                });
            }
        });
    }
    function getPayType(){
        $.ajax({
            type: "POST",
            dataType:'json',
            url: "/payRate/selectList",
            success: function (data) {
                if (data.code == "1000") {
                    $("#boinType1").html();
                    $("#boinType2").html();
                    $("#boinType3").html();
                    let element="";
                    if(data.obj!=null){
                        data.obj.forEach(l=>{
                            element+=" <option value="+l.id+">"+l.name+"</option></br>";
                        })
                        $("#boinType1").html(element);
                        $("#boinType2").html(element);
                        $("#boinType3").html(element);
                    }
                } else {
                    layer.alert(data);
                }
            },
            error: function () {
                layer.alert(param.name+"重复，请您更改后再试",function(){
                    layer.closeAll();
                    //加载load方法
                    load(obj);//自定义
                });
            }
        });
    }

    function getList(){
        $.ajax({
            type: "POST",
            dataType:'json',
            url: "/payOrder/searchListToWeb",
            success: function (data) {
                if (data.code == 200) {
                    $("#orderList").html();
                    let element="";
                    if(data.list!=null){
                        data.list.forEach(l=>{
                            $("#orderList").append("<tr>" +
                                "<td>"+l.createTime+"</td>" +
                                "<td>"+l.payTypeStr+"</td>" +
                                "<td>"+l.rateName+"</td>" +
                                "<td>"+l.amount+"</td>" +
                                "</tr>");
                        })
                        $("#emptyOrderList").hide();
                    }else {
                        $("#emptyOrderList").show();
                    }
                }
            },
            error: function () {
                layer.alert(param.name+"重复，请您更改后再试",function(){
                    layer.closeAll();
                    //加载load方法
                    load(obj);//自定义
                });
            }
        });
    }
    function load(obj){
        window.location.reload();
    }
</script>
</html>
